<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../js/myquery.js"></script> -->
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            padding-left: 20px;
        }

        .title {
            line-height: 50px;
        }

        .list li {
            line-height: 45px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 class="title">多元素获取和设置</h3>
        <input type="text" class="inp">
        <ul class="list">
            <li value="1">01
                <div></div>
            </li>
            <li value="1">02</li>
            <li value="1">03</li>
            <li value="1">04</li>
            <li value="1">05</li>
        </ul>
    </div>
    <div class="box">
        <button class="setHtml">
            设置html
        </button>
        <button class="getHtml">
            获取html
        </button>
        <button class="hide">隐藏</button>
        <button class="show">显示</button>
        <button class="setWidth">
            设置宽度
        </button>
        <button class="getWidth">
            获取宽度
        </button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="css">css</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </div>
</body>
<script>
   

    $(".title").text("hahahaha");
    $(".inp").val("2121");

    $(".hide").click(function () {
        $(".list li").hide();
    });
    $(".show").click(function () {
        $(".list li").show();
    });
    $(".setWidth").click(function () {
        // console.log(11);
        $(".list li").width("200");
    });
    $(".getWidth").click(function () {
        // console.log(11);
        console.log($(".list li").width());
    });
    $(".attr").click(function () {
        $(".list li").attr("class", "newLi");
        console.log($(".list li").attr("class"));
    });
    $(".prop").click(function () {
        $(".list li").prop("className", "new");
        console.log($(".list li").prop("classList"));
    });
    $(".css").click(function () {
        $(".list li").css({
            background: "pink",
            width: "200px",
            lineHeight: "100px"
        });

    });
    $(".addClass").click(function () {
        $(".list li").addClass("one two three");
    });
    $(".removeClass").click(function () {
        $(".list li").removeClass("one two");
    });
    $(".eq").click(function () {
        console.log($(".list li").eq(0));
        $(".list li").eq(0).css({
            background: "pink",
            width: "200px",
            lineHeight: "100px"
        });

    });
    $(".siblings").click(function () {
        // console.log($(".list li").eq(0));
        $(".list li").eq(1).siblings().css({
            background: "yellow",
            width: "200px",
            lineHeight: "100px"
        });

    });
    $(".chain").click(function () {
        $(".list li").click(function () {
            console.log(this);
        }).eq(0).html(1111).width(200).height(200).css({
            background: "red",
        }).siblings().html(222222).width(100).height(100).css({
            background: "blue"
        })
    })

</script>

</html>